<template>
    <!--  扩展功能示例  -->
    <DataGrid :data="tableData" :columns="columns" row-key="id" :auto-load="autoLoad" ref="dataGridRef">
        <template #toolbar-search>
            <IconSelect style="width: 200px" />
        </template>

        <template #toolbar-operation>
            <el-button type="primary">Primary</el-button>
        </template>

        <!-- 自定义列 -->
        <template #status="{ row }">
            <el-tag :type="row.status === 'enabled' ? 'success' : 'info'" size="small" disable-transitions>
                {{ row.status === 'enabled' ? '启用' : '停用' }}
            </el-tag>
        </template>
        <template #operation="{ row }">
            <el-button size="small" type="primary">修改</el-button>
            <el-button size="small" type="danger">删除</el-button>
            <el-button size="small" :type="row.status === 'enabled' ? 'warning' : 'success'">
                {{ row.status === 'enabled' ? '停用' : '启用' }}
            </el-button>
        </template>
    </DataGrid>

    <!-- 兼容ElTable示例1  -->
    <DataGrid :data="tableData1" style="width: 100%" row-key="id">
        <el-table-column label="xuhao" type="index" />
        <el-table-column prop="date" label="Date" />
        <el-table-column prop="name" label="Name" />
        <el-table-column prop="state" label="State" />
        <el-table-column prop="city" label="City" />
        <el-table-column prop="address" label="Address" />
        <el-table-column prop="zip" label="Zip" width="120" />
    </DataGrid>

    <!-- 兼容ElTable示例2  -->
    <DataGrid :auto-load="autoLoad" style="width: 100%" row-key="id">
        <el-table-column type="selection" />
        <el-table-column prop="productName" label="Product Name" />
        <el-table-column prop="tag" label="Tag" />
        <el-table-column prop="nodeType" label="Node Type" />
        <el-table-column prop="status" label="Status">
            <template #default="{ row }">
                <div>
                    ***123123-{{ JSON.stringify(row) }}
                    <el-button @click="console.log(aaaa)">123123</el-button>
                </div>
            </template>
        </el-table-column>
    </DataGrid>

    <!--图标使用示例-->
    <Block style="display: flex; align-items: center; gap: var(--app-margin)">
        <Icon type="icon-a-FixIDPattern" />
        <Icon type="icon-a-FixIDPattern" :size="20" />
        <Icon type="icon-a-FixIDPattern" :size="20" color="#ff6600" />
        <Icon type="icon-a-FixIDPattern" color="red" />
    </Block>
</template>

<script setup lang="ts">
import { Block, DataGrid, type DataGridInstance, Icon, IconSelect } from '@great/components';
import { random } from 'lodash-es';
import { sleep } from '@great/utils';

const aaaa = ref(123);

watch(aaaa, () => {
    console.log(aaaa.value);
});

defineOptions({ inheritAttrs: false });

const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');

const autoLoad = ref<any>({
    onLoad: async (page, size, filters, sorters, dataSource) => {
        await sleep(300);
        return {
            data: new Array(size).fill(null).map(() => {
                return {
                    id: random(10000000, 99999999),
                    productName: '中层采集器' + random(10000000, 99999999),
                    identifier: 'M1-002',
                    tag: '供热领域/二网',
                    nodeType: '网关设备',
                    status: '启用'
                };
            }),
            total: 100
        };
    }
});

// 定义列配置
const columns = ref<any>([
    {
        prop: 'productName',
        label: '产品信息',
        fixed: 'left'
    },
    {
        prop: 'tag',
        label: '产品标签',
        sortable: true,
        filters: [
            { text: '2016-05-01', value: '2016-05-01' },
            { text: '2016-05-02', value: '2016-05-02' },
            { text: '2016-05-03', value: '2016-05-03' },
            { text: '2016-05-04', value: '2016-05-04' }
        ]
    },
    {
        prop: 'nodeType',
        label: '节点类型',
        sortable: 'custom'
    },
    {
        prop: 'status',
        label: '状态',
        width: 100
    },
    {
        prop: 'operation',
        label: '状态',
        width: 200,
        fixed: 'right'
    }
]);

// 表格数据
const tableData = ref([
    {
        id: 1,
        productName: '低层采集器',
        identifier: 'L1-001',
        tag: '供热领域/二网',
        nodeType: '直连设备',
        status: '启用',
        children: [
            {
                id: 11,
                productName: '低层采集器',
                identifier: 'L1-001',
                tag: '供热领域/二网',
                nodeType: '直连设备',
                status: '启用'
            },
            {
                id: 12,
                productName: '中层采集器',
                identifier: 'M1-002',
                tag: '供热领域/二网',
                nodeType: '网关设备',
                status: '启用'
            }
        ]
    },
    {
        id: 2,
        productName: '中层采集器',
        identifier: 'M1-002',
        tag: '供热领域/二网',
        nodeType: '网关设备',
        status: '启用'
    },
    {
        id: 3,
        productName: '低层采集器',
        identifier: 'L1-001',
        tag: '供热领域/二网',
        nodeType: '直连设备',
        status: '启用'
    },
    {
        id: 4,
        productName: '中层采集器',
        identifier: 'M1-002',
        tag: '供热领域/二网',
        nodeType: '网关设备',
        status: '启用'
    }
]);

const tableData1 = [
    {
        date: '2016-05-03',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036'
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036'
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036'
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036'
    },
    {
        date: '2016-05-08',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036'
    },
    {
        date: '2016-05-06',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036'
    },
    {
        date: '2016-05-07',
        name: 'Tom',
        state: 'California',
        city: 'Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        zip: 'CA 90036'
    }
];
</script>

<style scoped>
.product-name-cell {
    display: flex;
    align-items: center;
}

.status-enabled {
    color: #409eff;
    font-weight: 500;
}

.status-disabled {
    color: #909399;
    font-weight: 400;
}
</style>
